<template>
  <div class="middle1">
    <div class="middle1_top">
      <div class="jing">近期最受期待</div>
      <div class="t1">
        <div class="ying" v-for="i in daiyingTop">
          <img v-bind:src="i.img" alt="" class="img1">
          <div class="img2"><img src="https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/notWish.png" alt=""></div>
          <div class="wish">{{i.wish}}人想看</div>
          <div class="nm">{{i.nm}}</div>
          <div class="time">{{i.comingTitle}}</div>
        </div>
      </div>
    </div>
    <div class="middle1_middle"></div>
    <div class="middle1_bottom">
      <div v-for="(item, key) in daiyingBottom" :key="key" class="big">
        <div class="yiriqi">{{ key }}</div>
        <div class="xia" v-for="i in item" :key="i.id">
          <img :src="i.img"  alt=""/>
          <div class="box">
            <ul class="list">
              <li class="rnm">{{ i.nm }}</li>
              <li class="rwish"><span>{{i.wish}}</span>人想看</li>
              <li>主演:<span>{{i.star}}</span></li>
              <li class="riqi">{{i.rt}}上映</li>
            </ul>
            <div v-if="i.showStateButton==undefined" class="btn"><button :style="{background:'orange'}">想看</button></div>
            <div  v-if="i.showStateButton!==undefined" class="btn"><button :style="{background:i.showStateButton.color}">{{i.showStateButton.content}}</button></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "daiying",
  data() {
    return {
      daiyingTop: [],
      daiyingBottom: []
    }
  },
  mounted() {
    //使用axios 获取数据
    //最新版的vuecli创建的项目，json数据只能写在  public文件夹中.获取数据直接写文件名称即可
    //最近最受期待
    axios.get("daiying.json").then(res => {
      /*console.log(res.data.coming)*/
      res.data.coming.forEach(el=>{
        el.img = el.img.replace("w.h","128.180");
        el.comingTitle = el.comingTitle.split(" ")[0]
      });
      this.daiyingTop = res.data.coming;
    });
    //按日期划分
    axios.get("daiying1.json").then(res => {
      let newdaiyingBottom = res.data.coming;
      console.log(newdaiyingBottom);
      var coming = {}; //对象，保存 组装完的数组
      //一维数组转二维数组
      newdaiyingBottom.forEach((item) => {
        //修改 图片的w.h 为 128.180
        item.img = item.img.replace("w.h", "128.180");
        if (coming[item.comingTitle]) {
          coming[item.comingTitle].push(item);
        } else {
          coming[item.comingTitle] = [];
          coming[item.comingTitle].push(item);
        }
      });
      this.daiyingBottom = coming;
      console.log(this.daiyingBottom);
    });
  }
}
</script>

<style scoped>
.middle1 {
  margin-top: 160px;
  margin-bottom: 55px;
}
.middle1_top{
  padding-left: 20px;
}
.t1{
  width: 95%;
  height: 190px;
  display: flex;
  overflow: auto;
}
.t1 .ying{
  width: 85px;
  margin-right: 10px;
  position: relative;
}
.t1 .ying .nm{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: bolder;
  color: black;
  margin-bottom: 5px;
}
.t1 .ying .wish{
  color: orange;
  font-size: 12.5px;
  position: absolute;
  top: 95px;
  left: 3px;
}
.t1 .img1{
  width: 85px;
  height: 115px;
  margin-bottom: 5px;
}
.t1 .img2 img{
  width: 10px;
  height: 10px;
}
.t1 .img2{
  text-align: center;
  position: absolute;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: rgba(61,63,71,.6);
  top: 0;
  border-radius: 0 0 10px 0;
}
.t1 .time{
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jing{
  padding-top: 10px;
  margin-bottom: 10px;
  font-size: 18px;
}
.middle1 .middle1_middle{
  background: #f5f5f5;
  width: 100%;
  height: 15px;
}
.middle1_bottom{
  padding-left: 20px;
}
.big .yiriqi{
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
}
.big .xia img{
  width: 76px;
  height: 106px;
}
.xia{
  display: flex;
  margin-bottom: 20px;
}
.xia .list{
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  justify-content: space-around;
  font-size: 16px;
  color: #666666;
}
.xia .list .rnm{
  font-size: 18px;
  color: black;
  font-weight: bolder;
}
.xia .list .rwish span{
  color: orange;
  font-weight: bolder;
}
.xia .box .btn button{
  color: white;
  width: 60px;
  height: 35px;
  text-align: center;
  border-radius: 17px;
  border: none;
  margin-top: 35px;
  margin-right: 20px;
  font-size: 16px;
}
.xia .box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.xia .box .riqi{

}
</style>